<template>
  <el-dialog
    title="编辑角色"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="30%"
  >
    <div class="form">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="top"
        label-width="0"
      >
        <quick-field-panel title="名称" :required="true">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" clearable>
            </el-input>
          </el-form-item>
        </quick-field-panel>

        <quick-field-panel title="备注">
          <el-form-item prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.remark"
              placeholder="请输入备注"
              clearable
            >
            </el-input>
          </el-form-item>
        </quick-field-panel>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" type="primary" @click="doEdit" :loading="loading"
        >确 定</el-button
      >
      <el-button size="medium" @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _api from "@/common/api/role";

export default {
  data() {
    return {
      loading: false,
      isShow: false,
      form: {},
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    showDialog(role) {
      this.form = Object.assign({}, role);
      this.isShow = true;
    },

    doEdit() {
      this.loading = true;

      try {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            await _api.editAsync(this.form);
            this.$emit("edited", {});
            this.isShow = false;
          }
        });
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {},
};
</script>

<style>
</style>